<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../2305/js/vue.js"></script>
</head>
<body>
    <!-- div id为app挂载点 -->
    <div id="app">
        <h3>父级数据</h3>
        <p>姓名:{{name}} 年龄: {{age}}</p>
         <my-oxl :age="age" :name="name" :love="msg"></my-oxl>
    </div>

<!-- 定义组件模板 -->
<template id="temp">
    <div>
        <h3>传到子模板组件修改后的数据</h3>
        子组件姓名:{{myname}}<br>
        子组件年龄:{{myage}}<br>
        子组件爱好:{{love}}<br>
    </div>
</template>

<!-- 使用javascript脚本 -->
    <script type="text/javascript">
        //注册组件 全局
        Vue.component('my-oxl',{
            props:{
                name:String,
                age:Number,
                love:{
                    type:String,
                    default:'呼叫欧牲口'
                }
            },
            template:'#temp',
            data(){
                return{
                    myname:'小'+this.name,
                    myage:this.age-10,
                }
            },
        })
//创建 app vue实例
        var app = new Vue({
            //挂载点
            el:'#app',
            data:{
                name:'wangshuo',
                age:20,
                msg:'hello'
            }
        })
    </script>
</body>
</html>